<template>
    <img class="left-logo" src="../../assets/images/admin/_.._logo_font20250106_uugai.com-5231517-17361544691882.png" />
    <el-menu 
        :router="true"
        :default-active="nowChooseMenu"
    >
        <div v-if="nowRole === 'admin'">
            <el-menu-item index="/adminMain/userManage">
                <el-icon><UserFilled /></el-icon>
                捐赠者管理
            </el-menu-item>
            <el-menu-item index="/adminMain/agencyManage">
                <el-icon><HomeFilled /></el-icon>
                募捐机构管理
            </el-menu-item>
            <el-menu-item index="/adminMain/donationRecordsManage">
                <el-icon><List /></el-icon>
                捐赠记录管理
            </el-menu-item>
            <el-menu-item index="/adminMain/fundraisingProjectsManage">
                <el-icon><HelpFilled /></el-icon>
                募捐项目管理
            </el-menu-item>
            <el-menu-item index="/adminMain/contentReview">
                <el-icon><Checked /></el-icon>
                审批募捐项目
            </el-menu-item>
            <el-menu-item index="/adminMain/commentManage">
                <el-icon><Comment /></el-icon>
                评论管理
            </el-menu-item>
        </div>
        <div v-else-if="nowRole === 'agency'">
            <el-menu-item index="/adminMain/agencyProjectsManage">
                <el-icon><List /></el-icon>
                募捐项目管理
            </el-menu-item>
            <el-menu-item index="/adminMain/donationProcessing">
                <el-icon><TrendCharts /></el-icon>
                捐款处理
            </el-menu-item>
            <el-menu-item index="/adminMain/agencyInfoManage">
                <el-icon><HomeFilled /></el-icon>
                机构信息管理
            </el-menu-item>
        </div>
    </el-menu>
</template>

<script lang="ts" setup>
import { UserFilled, Management, List, HelpFilled, Checked, HomeFilled, TrendCharts, Comment } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

/** 当前角色身份 */
const nowRole = ref('');

const route = useRoute();
/** 当前选中菜单 */
const nowChooseMenu = ref('/adminMain/userManage'); // 默认选中【用户管理】
onMounted(() => {
    // 获取当前用户身份
    const { role } = JSON.parse(localStorage.getItem('user') || "");
    nowRole.value = role;
    // 初始加载时，根据路由设置（因为可能在选中其他菜单后刷新了页面）当前选中菜单
    if (route.path !== '/adminMain/userManage') {
        nowChooseMenu.value = route.path;
    }
})
watch(route, () => {
    nowChooseMenu.value = route.path;
})
</script>

<style scoped>
.left-logo {
    width: 150px;
    margin-left: 25px;
}
.el-menu {
    --el-menu-border-color: none;
}
</style>